<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>model</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<style>
    .ball{
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: red;
    }
</style>
<body>
<div id="app">
    <input type="button" value="入场小球" @click="flag = !flag">
    <transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:after-enter="afterEnter">

    <div class="ball" v-if="flag"></div>
    </transition>
</div>

</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '大家好哈哈哈哈，你们好啊。',
            flag: false,
        },
        methods: {
            // 注意： 动画中的钩子函数的第一个参数：el， 表示要执行动画的那个元素的DOM元素
            beforeEnter(el){ // 表示动画入场之前， 此时，动画尚未开始，可以设置元素开始动画之前的起始样式
                // 设置小球开始动画之前起始位置
                el.style.transform = 'translate(0,0)';
            },
            enter(el, done){ // 表示动画开始之后的样式，这里可以设置小球完成动画之后的结束状态。
                el.offsetWidth; //  此行代码没有实际的作用，但是如果不写，出不来动画效果；可以认为el.offset**会强制刷新
                el.style.transform = 'translate(150px, 450px)';
                el.style.transition = 'all 1s ease';
                // done即为afterEnter函数的引用
                done();
            },
            afterEnter(el){ // 动画完成之后的调用
                this.flag = false;
            }
        }

    })
</script>
</html>